.left-gradient-background {
  width: 400px;
  height: 1080px;
  position: relative;
  box-sizing: border-box;
   // 响应式适配 - 基准分辨率为3952x1248
  // 默认情况下应用响应式适配
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862);
    transform-origin: top left;
  }
  @media screen and (max-width: 1080px) {
    transform: scale(0.2733);
    transform-origin: top left;
  }
  @media screen and (min-width: 5120px) {
    transform: scale(1.2955);
    transform-origin: top left;
  }
  // background: linear-gradient(
  //   to bottom,
  //   rgba(0, 0, 0, 0.9) 0%,
  //   rgba(0, 0, 0, 0.6) 15%,
  //   rgba(0, 0, 0, 0.3) 30%,
  //   rgba(0, 0, 0, 0) 50%,
  //   rgba(0, 0, 0, 0) 100%
  // );
  background: url(http://localhost:8085/static/images/shouye/左侧背景.png);
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background: linear-gradient(
    //   to right,
    //   rgba(0, 0, 0, 0.8) 0%,
    //   rgba(0, 0, 0, 0.5) 20%,
    //   rgba(0, 0, 0, 0.2) 40%,
    //   rgba(0, 0, 0, 0) 60%,
    //   rgba(0, 0, 0, 0) 100%
    // );
    background: url(http://localhost:8085/static/images/shouye/左侧背景.png);
    pointer-events: none;
  }
}

// 响应式支持
.responsive {
  @media (max-width: 1920px) {
    transform: scale(0.8);
    transform-origin: top left;
  }
  
  @media (max-width: 1440px) {
    transform: scale(0.6);
    transform-origin: top left;
  }
  
  @media (max-width: 1024px) {
    transform: scale(0.4);
    transform-origin: top left;
  }
  
  @media (max-width: 768px) {
    transform: scale(0.3);
    transform-origin: top left;
  }
}

// 设计模式样式
[data-component-name="LeftBackground"] {
  &.selected {
    outline: 2px solid #0099ff;
    outline-offset: 2px;
  }
  
  &:hover {
    cursor: pointer;
  }
} 